<template>
  <div class="container">
    <div class="app-container">
      <el-button class="btn-add" size="mini" type="primary" @click="dialogVisible=true">添加权限</el-button>
      <el-table
        :data="list"
        style="width: 100%"
        row-key="id"
        default-expand-all
        class="btn-add"
      >
        <el-table-column
          prop="name"
          label="名称"
        />
        <el-table-column
          prop="code"
          label="标识"
        />
        <el-table-column
          prop="description"
          label="描述"
        />
        <el-table-column
          label="操作"
        >
          <template v-slot="{row}">
            <el-button v-if="row.type === 1" size="mini" type="text" @click="add(row.id)">添加</el-button>
            <el-button size="mini" type="text" @click="redact(row.id)">编辑</el-button>
            <el-button v-permission="'del-employee'" size="mini" type="text" @click="Del(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Dialog ref="diaLog" :dialog-visible.sync="dialogVisible" :p-id="pId" :redact-id="redactId" @upDate="getPermissionList" />
  </div>
</template>
<script>
import Dialog from '@/views/permission/components/Dialog.vue'
import { getPermissionList, delPermission } from '@/api/permission'
import { transListToTreeData } from '@/utils'
export default {
  name: 'Permission',
  components: {
    Dialog
  },
  data() {
    return {
      list: [], // 数据列表
      dialogVisible: false, // 控制添加弹窗是否显示
      idDel: false, // 控制删除弹框是否显示
      pId: null, // 一级菜单id
      redactId: null // 编辑变量
    }
  },
  created() {
    // 初始化请求渲染数据
    this.getPermissionList()
  },
  methods: {
    // 请求数据
    async getPermissionList() {
      this.list = transListToTreeData(await getPermissionList(), 0)
    },
    // 删除接口
    async Del(id) {
      await this.$confirm('此操作将永久删除该文件, 是否继续?')
      await delPermission(id)
      this.$message.success('删除成功！')
      // 刷新数据
      this.getPermissionList()
    },
    // 行内添加按钮
    add(id) {
      this.pId = id
      this.dialogVisible = true
    },
    // 编辑
    redact(id) {
      this.redactId = id
      this.$nextTick(async() => {
        await this.$refs.diaLog.loadData()
        this.dialogVisible = true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep.btn-add {
  margin: 10px;
}
</style>
